<script setup>
import Editor from 'wangeditor'
import {Plus} from "@element-plus/icons-vue";
import {onMounted, ref, unref} from 'vue'
import {ClickOutside as vClickOutside, ElMessage} from 'element-plus'
import router from "@/router";
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
const type=ref();
const avatar=ref("imgs/head1.jpg")
const content=ref()
const editorContent=ref(null);

let editor=null
onMounted(()=>{
  //创建富文本编辑器实例
  editor=new Editor(editorContent.value)
  editor.config.placeholder='请输入内容详情...'
  //将富文本编辑器渲染到页面中
  editor.create()
})

const dialogImageUrl = ref(null)
const dialogVisible = ref(false)
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
const handleSuccess=((response,uploadFile,uploadFiles)=>{
  if(uploadFile.raw.type.includes('image')){
    content.value.imgUrl=response.data
  }
  else{
    content.value.videoUrl=response.data
  }
})
const picUrl=ref('');
const handleRemove= (uploadFile, uploadFiles) => {
  axios.post(BASE_URL+'/v1/remove?url='+picUrl.value)
      .then(res=>{
        if(res.data.code==1){
          ElMessage.success('删除成功')
          content.value.imgUrl=null;
        }
      })
  console.log(uploadFile, uploadFiles)
}
const handleChange=()=>{
  content.value.categoryId=null
  loadCategories()
}
</script>

<template>
    <el-row>
      <div style="width: 1500px;margin: 0 auto;">
        <el-row>
          <el-col :span="4">
          </el-col>
          <el-col :span="16">
            <a href="www.kcircle.com">知友圈</a>｜
            <h5 style="margin: 0;display: inline">写文章</h5>
            <el-button ref="buttonRef" v-click-outside="onClickOutside" round style="float:right">
              <el-icon ref="iconRef"><More /></el-icon>
            </el-button>
            <el-popover
                ref="popoverRef"
                :virtual-ref="buttonRef"
                trigger="click"
                virtual-triggering
            >
              <el-menu style="border:none">
                <el-menu-item>我的文章</el-menu-item>
                <el-menu-item>我的专栏</el-menu-item>
                <el-menu-item>专栏/发现</el-menu-item>
              </el-menu>
            </el-popover>
          </el-col>
          <el-col :span="4">
            <el-avatar shape="square" :size="'default'" :src=avatar />
          </el-col>
        </el-row>
      </div>
    </el-row>
  <div style="width:1200px;margin:0 auto;">
    <el-form-item>
      <div ref="editorContent" style="margin:0 auto;"></div>
    </el-form-item>
    <hr>
    <el-form-item label="封面" style="position:relative; left:100px;">
      <el-upload
          v-model:file-list="fileList"
          action="http://localhost:8080/v1/upload"
          name="multipartFile"
          limit=1
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </el-form-item>

  </div>
  <div style="width:1500px;margin:0 auto;">
    <div style="position:relative;left:500px;">
      <el-button>回到顶部</el-button>
      <el-button>预览</el-button>
      <el-button type="primary">更新</el-button>
    </div>

  </div>
</template>

<style scoped>
a{
  text-decoration:none;
  color:inherit;
}
div{
 color:rgb(5, 109, 232);
}
</style>